<template>
    <div>
<Button type="default" @click='modal1=true'>新增</Button>
    <Input search enter-button="Search" placeholder="Enter something..." v-model='name' @on-search='search'/>
    <Table border :columns="columns7" :data="userdata"></Table>
    <Page :total="total" show-sizer @on-change='onChangePage' :page-size='pagesize' :page-size-opts='[5,10,15,20]' @on-page-size-change='onpagesizechange'/>
    <Modal
        v-model="modal1"
        title="Common Modal dialog box title" cancel-text='AAA'
        >
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="Title" prop="title">
            <Input v-model="formValidate.title" placeholder="Enter your title"></Input>
        </FormItem>
        <FormItem label="Comment" prop="comment">
            <Input v-model="formValidate.comment" placeholder="Enter your comment"></Input>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
            <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
        </FormItem>
    </Form>
    </Modal>
    
    </div>
</template>
<script>
    import {Base} from '@/components/base/base';
    export default {
        mixins:[Base],
        data () {
            return {
                 module:'comment',
                formValidate: {
                    comment: '',
                    title: '',
                    
                },
                ruleValidate: {
                    name: [
                        { required: true, message: 'The name cannot be empty', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: 'password cannot be empty', trigger: 'blur' }
                    ]
                },
                columns7: [
                    {
                        title: 'Comment',
                        key: 'comment',
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.comment)
                            ]);
                        }
                    },
                    {
                        title: 'Title',
                        key: 'title'
                    },
                    {
                        title: 'Action',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            console.log(params)
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.edit(params)
                                        }
                                    }
                                }, 'Edit'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params)
                                        }
                                    }
                                }, 'Delete')
                            ]);
                        }
                    }
                ],
                userdata: [
                  
                ],
            }
        },
        
    }
</script>
<style>
.ivu-modal-footer{
    display:none
}
</style>